<template>
	<view class="content">
		<view class="bg">
			<view class="kuai">
				<image :src="user.erweima" mode=""></image>
				<view class="t1">截图分享给好友，获得邀请奖励
					和充值奖励哦</view>
				<view class="t2">分享链接：<br>{{user.url}}</view>
				<view class="btn" @click="copy">复制</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				user: ''
			}
		},
		onLoad() {
			this.share()
		},
		methods: {
			async share() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/user/share'
					})
					this.user = result.data.data
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			copy() {
				uni.setClipboardData({
					data: this.user.url,
					success: () => {
						this.msg('复制成功')
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 48rpx 30rpx;

		.bg {
			background: url("https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/bg.png") no-repeat;
			background-size: 100% 100%;
			height: 839rpx;
			display: flex;
			justify-content: center;

			.kuai {
				width: 570rpx;
				height: 667rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-top: 60rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 280rpx;
					height: 280rpx;
					margin-top: 60rpx;
				}

				.t1 {
					font-size: 26rpx;
					font-weight: 500;
					color: #000000;
					width: 364rpx;
					text-align: center;
					margin-top: 8rpx;
				}

				.t2 {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					margin-top: 64rpx;
          text-align: center;
				}

				.btn {
					width: 120rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					border-radius: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 56rpx;
					margin-top: 32rpx;
				}
			}
		}
	}
</style>
